import React, { useRef, useEffect } from 'react';

import getFileTypePng from './getFileTypeTempltate';

import './fileList.scss';

function formatFileSize(bytes) {
    if (bytes === 0) return '0B';

    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    let unitIndex = 0;

    while (bytes >= 1024 && unitIndex < units.length - 1) {
        bytes /= 1024;
        unitIndex++;
    }

    return `${Math.round(bytes * 100) / 100}${units[unitIndex]}`;
}

const FileList = ({ fileList=[],closeFunction,onClickFunction }) => {

    useEffect(()=>{
        $("#file-list").on('scroll',function (e) {
            let node = e.target;
            let left = Math.ceil(node.scrollLeft);
            if(left <= 0){
                $(node).find(".icon-left").hide();
                $(node).find(".icon-right").show();
                return;
            }
            if(left > 0){
                $(node).find(".icon-left").show();
            }
            if(left >= node.scrollWidth-node.clientWidth){
                $(node).find(".icon-right").hide();
            }else{
                $(node).find(".icon-right").show();
            }
        })
    },[]);

    useEffect(()=>{
        let node = document.getElementById("file-list");
        if(node.scrollWidth > node.clientWidth){
            $(node).find(".icon-right").show();
        }
    },[fileList]);

    const goLeft = (e) => {
        let node = e.currentTarget.parentNode.parentNode;
        scroll("left",node,170,20);
    };

    const goRight = (e) =>{
        let node = e.currentTarget.parentNode.parentNode;
        scroll("right",node,170,20);
    };

    const scroll = (type,node,value,interval) => {
        let num = 0;
        let timer = setInterval(function () {
            if(type === "left"){
                node.scrollLeft = node.scrollLeft - interval;
            }else{
                node.scrollLeft = node.scrollLeft + interval;
            }
            num += interval;
            if(num>=value){
                clearInterval(timer);
            }
        },50);
    };

    return (
        <div className="file-list-box">
            <div id="file-list">
                <div className="icon-left">
                    <svg onClick={goLeft} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="65" height="65" viewBox="0 0 65 65"><defs><filter id="master_svg0_210_59511" filterUnits="objectBoundingBox" colorInterpolationFilters="sRGB" x="-0.6875" y="-0.5625" width="2.375" height="2.375"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4" dx="0"/><feGaussianBlur stdDeviation="5.5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11999999731779099 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><clipPath id="master_svg1_210_59513"><rect x="54.5" y="18.5" width="20" height="20" rx="0"/></clipPath></defs><g transform="matrix(-1,0,0,1,97,0)" filter="url(#master_svg0_210_59511)"><g><ellipse cx="64.5" cy="28.5" rx="16" ry="16" fill="var(--bg-color14)"/><path d="M80.5,28.5Q80.5,28.8928,80.4807,29.2851Q80.4615,29.6774,80.423,30.0683Q80.3845,30.4592,80.32679999999999,30.8477Q80.2692,31.2362,80.1926,31.6214Q80.1159,32.006699999999995,80.0205,32.387699999999995Q79.9251,32.768699999999995,79.811,33.1446Q79.697,33.520399999999995,79.5647,33.8902Q79.4324,34.2601,79.2821,34.6229Q79.1318,34.9858,78.96379999999999,35.340900000000005Q78.7959,35.6959,78.61070000000001,36.0423Q78.4256,36.3887,78.22370000000001,36.7256Q78.0217,37.0625,77.8035,37.3891Q77.5853,37.7157,77.3513,38.0312Q77.1173,38.3467,76.8682,38.6503Q76.619,38.953900000000004,76.3552,39.2449Q76.0914,39.536,75.8137,39.8137Q75.536,40.0914,75.2449,40.355199999999996Q74.9539,40.619,74.6503,40.8682Q74.3467,41.1173,74.0312,41.351299999999995Q73.7157,41.585300000000004,73.3891,41.8035Q73.0625,42.021699999999996,72.7256,42.2237Q72.3887,42.4256,72.0423,42.6107Q71.6959,42.7959,71.3409,42.9638Q70.9858,43.1318,70.6229,43.2821Q70.2601,43.4324,69.8902,43.5647Q69.5204,43.697,69.1446,43.811Q68.7687,43.9251,68.3877,44.0205Q68.0067,44.115899999999996,67.6214,44.1926Q67.2362,44.2692,66.8477,44.3268Q66.4592,44.3845,66.0683,44.423Q65.6774,44.4615,65.2851,44.4807Q64.8928,44.5,64.5,44.5Q64.1072,44.5,63.7149,44.4807Q63.3226,44.4615,62.9317,44.423Q62.540800000000004,44.3845,62.1523,44.3268Q61.7638,44.2692,61.3786,44.1926Q60.9933,44.115899999999996,60.6123,44.0205Q60.2313,43.9251,59.8554,43.811Q59.4796,43.697,59.1098,43.5647Q58.7399,43.4324,58.37706,43.2821Q58.014179999999996,43.1318,57.65912,42.9638Q57.304050000000004,42.7959,56.95765,42.6107Q56.61125,42.4256,56.27436,42.2237Q55.93746,42.021699999999996,55.61088,41.8035Q55.28429,41.585300000000004,54.96881,41.351299999999995Q54.65333,41.1173,54.34971,40.8682Q54.04609,40.619,53.75506,40.355199999999996Q53.46403,40.0914,53.18629,39.8137Q52.90856,39.536,52.64478,39.2449Q52.38101,38.953900000000004,52.13183,38.6503Q51.88266,38.3467,51.64868,38.0312Q51.414699999999996,37.7157,51.19649,37.3891Q50.97827,37.0625,50.77634,36.7256Q50.57441,36.3887,50.38926,36.0423Q50.20411,35.6959,50.03617,35.340900000000005Q49.86824,34.9858,49.71793,34.6229Q49.56762,34.2601,49.435294999999996,33.8902Q49.302972,33.520399999999995,49.188955,33.1446Q49.074937,32.768699999999995,48.9795,32.387699999999995Q48.884063,32.006699999999995,48.807435,31.6214Q48.730808,31.2362,48.673176,30.8477Q48.615543,30.4592,48.5770444,30.0683Q48.5385454,29.6774,48.5192727,29.2851Q48.5,28.8928,48.5,28.5Q48.5,28.1072,48.5192727,27.7149Q48.5385454,27.3226,48.5770444,26.9317Q48.615543,26.5408,48.673176,26.1523Q48.730808,25.7638,48.807435,25.3786Q48.884063,24.993299999999998,48.9795,24.612299999999998Q49.074937,24.231299999999997,49.188955,23.8554Q49.302972,23.479599999999998,49.435294999999996,23.1098Q49.56762,22.7399,49.71793,22.37706Q49.86824,22.01418,50.03617,21.65912Q50.20411,21.30405,50.38926,20.95765Q50.57441,20.61125,50.77634,20.27436Q50.97827,19.93746,51.19649,19.61088Q51.414699999999996,19.28429,51.64868,18.96881Q51.88266,18.65333,52.13183,18.34971Q52.38101,18.04609,52.64478,17.75506Q52.90856,17.46403,53.18629,17.18629Q53.46403,16.90856,53.75506,16.64478Q54.04609,16.38101,54.34971,16.13183Q54.65333,15.88266,54.96881,15.64868Q55.28429,15.4147,55.61088,15.19649Q55.93746,14.97827,56.27436,14.77634Q56.61125,14.57441,56.95765,14.38926Q57.304050000000004,14.20411,57.65912,14.03617Q58.014179999999996,13.86824,58.37706,13.717929999999999Q58.7399,13.56762,59.1098,13.435295Q59.4796,13.302972,59.8554,13.188955Q60.2313,13.074937,60.6123,12.9795Q60.9933,12.884063,61.3786,12.807435Q61.7638,12.730808,62.1523,12.673176Q62.540800000000004,12.615543,62.9317,12.5770444Q63.3226,12.5385454,63.7149,12.5192727Q64.1072,12.5,64.5,12.5Q64.8928,12.5,65.2851,12.5192727Q65.6774,12.5385454,66.0683,12.5770444Q66.4592,12.615543,66.8477,12.673176Q67.2362,12.730808,67.6214,12.807435Q68.0067,12.884063,68.3877,12.9795Q68.7687,13.074937,69.1446,13.188955Q69.5204,13.302972,69.8902,13.435295Q70.2601,13.56762,70.6229,13.717929999999999Q70.9858,13.86824,71.3409,14.03617Q71.6959,14.20411,72.0423,14.38926Q72.3887,14.57441,72.7256,14.77634Q73.0625,14.97827,73.3891,15.19649Q73.7157,15.4147,74.0312,15.64868Q74.3467,15.88266,74.6503,16.13183Q74.9539,16.38101,75.2449,16.64478Q75.536,16.90856,75.8137,17.18629Q76.0914,17.46403,76.3552,17.75506Q76.619,18.04609,76.8682,18.34971Q77.1173,18.65333,77.3513,18.96881Q77.5853,19.28429,77.8035,19.61088Q78.0217,19.93746,78.22370000000001,20.27436Q78.4256,20.61125,78.61070000000001,20.95765Q78.7959,21.30405,78.96379999999999,21.65912Q79.1318,22.01418,79.2821,22.37706Q79.4324,22.7399,79.5647,23.1098Q79.697,23.479599999999998,79.811,23.8554Q79.9251,24.231299999999997,80.0205,24.612299999999998Q80.1159,24.993299999999998,80.1926,25.3786Q80.2692,25.7638,80.32679999999999,26.1523Q80.3845,26.5408,80.423,26.9317Q80.4615,27.3226,80.4807,27.7149Q80.5,28.1072,80.5,28.5ZM79.5,28.5Q79.5,28.1318,79.4819,27.764Q79.4639,27.3962,79.4278,27.0297Q79.3917,26.6633,79.3376,26.299Q79.2836,25.9348,79.2118,25.5736Q79.1399,25.2125,79.0505,24.8553Q78.961,24.4981,78.8541,24.145699999999998Q78.74719999999999,23.7934,78.6232,23.4467Q78.4991,23.099899999999998,78.3582,22.759700000000002Q78.2173,22.41955,78.0598,22.086669999999998Q77.9024,21.7538,77.7288,21.42905Q77.5552,21.104300000000002,77.3659,20.78846Q77.17660000000001,20.47262,76.97200000000001,20.16645Q76.7675,19.86027,76.5481,19.56451Q76.3288,19.26875,76.0952,18.984099999999998Q75.8616,18.699460000000002,75.6143,18.42662Q75.367,18.15378,75.1066,17.8934Q74.8462,17.633020000000002,74.57339999999999,17.38573Q74.3005,17.13844,74.0159,16.90484Q73.7313,16.67124,73.4355,16.45189Q73.1397,16.23253,72.8335,16.02796Q72.5274,15.82338,72.2115,15.63407Q71.8957,15.44476,71.5709,15.271180000000001Q71.2462,15.0976,70.91329999999999,14.94016Q70.5804,14.78272,70.2402,14.64181Q69.9,14.50089,69.55330000000001,14.37684Q69.20660000000001,14.252790000000001,68.8543,14.1459Q68.5019,14.039,68.1447,13.94953Q67.7875,13.86006,67.4264,13.788219999999999Q67.0652,13.716380000000001,66.701,13.66235Q66.33670000000001,13.608319999999999,65.97030000000001,13.57223Q65.6038,13.53614,65.236,13.51807Q64.8682,13.5,64.5,13.5Q64.1318,13.5,63.763999999999996,13.51807Q63.3962,13.53614,63.0297,13.57223Q62.6633,13.608319999999999,62.299,13.66235Q61.934799999999996,13.716380000000001,61.5736,13.788219999999999Q61.2125,13.86006,60.8553,13.94953Q60.4981,14.039,60.1457,14.1459Q59.7934,14.252790000000001,59.4467,14.37684Q59.0999,14.50089,58.7597,14.64181Q58.41955,14.78272,58.08667,14.94016Q57.7538,15.0976,57.429050000000004,15.271180000000001Q57.1043,15.44476,56.78846,15.63407Q56.47262,15.82338,56.16645,16.02796Q55.86027,16.23253,55.56451,16.45189Q55.26875,16.67124,54.9841,16.90484Q54.69946,17.13844,54.42662,17.38573Q54.15378,17.633020000000002,53.8934,17.8934Q53.63302,18.15378,53.38573,18.42661Q53.13844,18.699460000000002,52.90484,18.984099999999998Q52.67124,19.26875,52.45189,19.56451Q52.23253,19.86027,52.02796,20.16645Q51.82338,20.47262,51.63407,20.78846Q51.44476,21.104300000000002,51.27118,21.42905Q51.0976,21.7538,50.94016,22.086669999999998Q50.78272,22.41955,50.64181,22.759700000000002Q50.50089,23.099899999999998,50.37684,23.4467Q50.25279,23.7934,50.14589,24.145699999999998Q50.039,24.4981,49.94953,24.8553Q49.86006,25.2125,49.78822,25.5736Q49.71638,25.9348,49.66235,26.299Q49.60832,26.6633,49.57223,27.0297Q49.53614,27.3962,49.51807,27.764Q49.5,28.1318,49.5,28.5Q49.5,28.8682,49.51807,29.236Q49.53614,29.6038,49.57223,29.9703Q49.60832,30.3367,49.66235,30.701Q49.71638,31.0652,49.78822,31.4264Q49.86006,31.7875,49.94953,32.1447Q50.039,32.5019,50.14589,32.854299999999995Q50.25279,33.2066,50.37684,33.5533Q50.50089,33.9,50.64181,34.2402Q50.78272,34.5804,50.94016,34.9133Q51.0976,35.2462,51.27118,35.5709Q51.44476,35.895700000000005,51.63407,36.2115Q51.82338,36.5274,52.02796,36.8335Q52.23253,37.139700000000005,52.45189,37.435500000000005Q52.67124,37.731300000000005,52.90484,38.0159Q53.13844,38.3005,53.38573,38.5734Q53.63302,38.846199999999996,53.8934,39.1066Q54.15378,39.367000000000004,54.42661,39.6143Q54.69946,39.861599999999996,54.9841,40.0952Q55.26875,40.3288,55.56451,40.548100000000005Q55.86027,40.7675,56.16645,40.972Q56.47262,41.1766,56.78846,41.365899999999996Q57.1043,41.5552,57.429050000000004,41.7288Q57.7538,41.9024,58.08667,42.059799999999996Q58.41955,42.2173,58.7597,42.3582Q59.0999,42.4991,59.4467,42.6232Q59.7934,42.7472,60.1457,42.8541Q60.4981,42.961,60.8553,43.0505Q61.2125,43.1399,61.5736,43.2118Q61.934799999999996,43.2836,62.299,43.337599999999995Q62.6633,43.3917,63.0297,43.427800000000005Q63.3962,43.463899999999995,63.763999999999996,43.481899999999996Q64.1318,43.5,64.5,43.5Q64.8682,43.5,65.236,43.481899999999996Q65.6038,43.463899999999995,65.97030000000001,43.427800000000005Q66.33670000000001,43.3917,66.701,43.337599999999995Q67.0652,43.2836,67.4264,43.2118Q67.7875,43.1399,68.1447,43.0505Q68.5019,42.961,68.8543,42.8541Q69.20660000000001,42.7472,69.55330000000001,42.6232Q69.9,42.4991,70.2402,42.3582Q70.5804,42.2173,70.91329999999999,42.059799999999996Q71.2462,41.9024,71.5709,41.7288Q71.8957,41.5552,72.2115,41.365899999999996Q72.5274,41.1766,72.8335,40.972Q73.1397,40.7675,73.4355,40.548100000000005Q73.7313,40.3288,74.0159,40.0952Q74.3005,39.861599999999996,74.57339999999999,39.6143Q74.8462,39.367000000000004,75.1066,39.1066Q75.367,38.846199999999996,75.6143,38.5734Q75.8616,38.3005,76.0952,38.0159Q76.3288,37.731300000000005,76.5481,37.435500000000005Q76.7675,37.139700000000005,76.97200000000001,36.8335Q77.17660000000001,36.5274,77.3659,36.2115Q77.5552,35.895700000000005,77.7288,35.5709Q77.9024,35.2462,78.0598,34.9133Q78.2173,34.5804,78.3582,34.2402Q78.4991,33.9,78.6232,33.5533Q78.74719999999999,33.2066,78.8541,32.854299999999995Q78.961,32.5019,79.0505,32.1447Q79.1399,31.7875,79.2118,31.4264Q79.2836,31.0652,79.3376,30.701Q79.3917,30.3367,79.4278,29.9703Q79.4639,29.6038,79.4819,29.236Q79.5,28.8682,79.5,28.5Z" fill="var(--bd-color4)"/></g><g clipPath="url(#master_svg1_210_59513)"><g><path d="M68.9763283203125,28.856285546875C68.9854283203125,28.838665546875,69.0001783203125,28.823915546875,69.0081483203125,28.805725546875C69.1643483203125,28.480825546875,69.1132083203125,28.083265546875,68.8366183203125,27.821965546875L62.5666983203125,21.891722546875C62.2247683203125,21.568537446875,61.6857793203125,21.583864746875,61.3620133203125,21.925247546875C61.0388283203125,22.267179546875,61.0536061203125,22.806165546875,61.3955383203125,23.129935546875L67.0213783203125,28.451885546875L61.4176743203125,33.852735546874996C61.0791619203125,34.179335546875,61.0689336203125,34.718335546875,61.3955383203125,35.057435546875C61.5625203203125,35.231235546875,61.7857423203125,35.318235546875,62.0089653203125,35.318235546875C62.2219583203125,35.318235546875,62.4349483203125,35.238635546875,62.6002283203125,35.079635546875L68.8133483203125,29.091445546875C68.8252883203125,29.079505546874998,68.8298083203125,29.063045546875,68.8417483203125,29.050555546875C68.8508483203125,29.042045546875002,68.8604983203125,29.035785546875,68.8695583203125,29.026715546875C68.9178283203125,28.976125546875,68.9433883203125,28.914205546875,68.9763283203125,28.856285546875Z" fill="var(--text-color5)"/></g></g></g></svg>
                </div>
                <div className="icon-right">
                    <svg onClick={goRight} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="65" height="65" viewBox="0 0 65 65"><defs><filter id="master_svg0_172_002426" filterUnits="objectBoundingBox" colorInterpolationFilters="sRGB" x="-0.6875" y="-0.5625" width="2.375" height="2.375"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4" dx="0"/><feGaussianBlur stdDeviation="5.5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11999999731779099 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><clipPath id="master_svg1_172_002427"><rect x="22.5" y="18.5" width="20" height="20" rx="0"/></clipPath></defs><g filter="url(#master_svg0_172_002426)"><g><ellipse cx="32.5" cy="28.5" rx="16" ry="16" fill="var(--bg-color14)"/><path d="M48.5,28.5Q48.5,28.8928,48.4807,29.2851Q48.4615,29.6774,48.423,30.0683Q48.3845,30.4592,48.3268,30.8477Q48.2692,31.2362,48.1926,31.6214Q48.115899999999996,32.006699999999995,48.0205,32.387699999999995Q47.9251,32.768699999999995,47.811,33.1446Q47.697,33.520399999999995,47.5647,33.8902Q47.4324,34.2601,47.2821,34.6229Q47.1318,34.9858,46.9638,35.340900000000005Q46.7959,35.6959,46.6107,36.0423Q46.4256,36.3887,46.2237,36.7256Q46.021699999999996,37.0625,45.8035,37.3891Q45.585300000000004,37.7157,45.351299999999995,38.0312Q45.1173,38.3467,44.8682,38.6503Q44.619,38.953900000000004,44.355199999999996,39.2449Q44.0914,39.536,43.8137,39.8137Q43.536,40.0914,43.2449,40.355199999999996Q42.953900000000004,40.619,42.6503,40.8682Q42.3467,41.1173,42.0312,41.351299999999995Q41.7157,41.585300000000004,41.3891,41.8035Q41.0625,42.021699999999996,40.7256,42.2237Q40.3887,42.4256,40.0423,42.6107Q39.6959,42.7959,39.340900000000005,42.9638Q38.9858,43.1318,38.6229,43.2821Q38.2601,43.4324,37.8902,43.5647Q37.520399999999995,43.697,37.1446,43.811Q36.768699999999995,43.9251,36.387699999999995,44.0205Q36.006699999999995,44.115899999999996,35.6214,44.1926Q35.2362,44.2692,34.8477,44.3268Q34.459199999999996,44.3845,34.0683,44.423Q33.6774,44.4615,33.2851,44.4807Q32.8928,44.5,32.5,44.5Q32.1072,44.5,31.7149,44.4807Q31.3226,44.4615,30.9317,44.423Q30.5408,44.3845,30.1523,44.3268Q29.7638,44.2692,29.3786,44.1926Q28.993299999999998,44.115899999999996,28.612299999999998,44.0205Q28.231299999999997,43.9251,27.8554,43.811Q27.479599999999998,43.697,27.1098,43.5647Q26.7399,43.4324,26.37706,43.2821Q26.01418,43.1318,25.65912,42.9638Q25.30405,42.7959,24.95765,42.6107Q24.61125,42.4256,24.27436,42.2237Q23.93746,42.021699999999996,23.61088,41.8035Q23.28429,41.585300000000004,22.96881,41.351299999999995Q22.65333,41.1173,22.34971,40.8682Q22.04609,40.619,21.75506,40.355199999999996Q21.46403,40.0914,21.18629,39.8137Q20.90856,39.536,20.64478,39.2449Q20.38101,38.953900000000004,20.13183,38.6503Q19.88266,38.3467,19.64868,38.0312Q19.4147,37.7157,19.19649,37.3891Q18.978270000000002,37.0625,18.77634,36.7256Q18.57441,36.3887,18.38926,36.0423Q18.20411,35.6959,18.03617,35.340900000000005Q17.86824,34.9858,17.71793,34.6229Q17.56762,34.2601,17.435295,33.8902Q17.302972,33.520399999999995,17.188955,33.1446Q17.074937,32.768699999999995,16.9795,32.387699999999995Q16.884063,32.006699999999995,16.807435,31.6214Q16.730808,31.2362,16.673176,30.8477Q16.615543,30.4592,16.5770444,30.0683Q16.5385454,29.6774,16.5192727,29.2851Q16.5,28.8928,16.5,28.5Q16.5,28.1072,16.5192727,27.7149Q16.5385454,27.3226,16.5770444,26.9317Q16.615543,26.5408,16.673176,26.1523Q16.730808,25.7638,16.807435,25.3786Q16.884063,24.993299999999998,16.9795,24.612299999999998Q17.074937,24.231299999999997,17.188955,23.8554Q17.302972,23.479599999999998,17.435295,23.1098Q17.56762,22.7399,17.71793,22.37706Q17.86824,22.01418,18.03617,21.65912Q18.20411,21.30405,18.38926,20.95765Q18.57441,20.61125,18.77634,20.27436Q18.978270000000002,19.93746,19.19649,19.61088Q19.4147,19.28429,19.64868,18.96881Q19.88266,18.65333,20.13183,18.34971Q20.38101,18.04609,20.64478,17.75506Q20.90856,17.46403,21.18629,17.18629Q21.46403,16.90856,21.75506,16.64478Q22.04609,16.38101,22.34971,16.13183Q22.65333,15.88266,22.96881,15.64868Q23.28429,15.4147,23.61088,15.19649Q23.93746,14.97827,24.27436,14.77634Q24.61125,14.57441,24.95765,14.38926Q25.30405,14.20411,25.65912,14.03617Q26.01418,13.86824,26.37706,13.717929999999999Q26.7399,13.56762,27.1098,13.435295Q27.479599999999998,13.302972,27.8554,13.188955Q28.231299999999997,13.074937,28.612299999999998,12.9795Q28.993299999999998,12.884063,29.3786,12.807435Q29.7638,12.730808,30.1523,12.673176Q30.5408,12.615543,30.9317,12.5770444Q31.3226,12.5385454,31.7149,12.5192727Q32.1072,12.5,32.5,12.5Q32.8928,12.5,33.2851,12.5192727Q33.6774,12.5385454,34.0683,12.5770444Q34.459199999999996,12.615543,34.8477,12.673176Q35.2362,12.730808,35.6214,12.807435Q36.006699999999995,12.884063,36.387699999999995,12.9795Q36.768699999999995,13.074937,37.1446,13.188955Q37.520399999999995,13.302972,37.8902,13.435295Q38.2601,13.56762,38.6229,13.717929999999999Q38.9858,13.86824,39.340900000000005,14.03617Q39.6959,14.20411,40.0423,14.38926Q40.3887,14.57441,40.7256,14.77634Q41.0625,14.97827,41.3891,15.19649Q41.7157,15.4147,42.0312,15.64868Q42.3467,15.88266,42.6503,16.13183Q42.953900000000004,16.38101,43.2449,16.64478Q43.536,16.90856,43.8137,17.18629Q44.0914,17.46403,44.355199999999996,17.75506Q44.619,18.04609,44.8682,18.34971Q45.1173,18.65333,45.351299999999995,18.96881Q45.585300000000004,19.28429,45.8035,19.61088Q46.021699999999996,19.93746,46.2237,20.27436Q46.4256,20.61125,46.6107,20.95765Q46.7959,21.30405,46.9638,21.65912Q47.1318,22.01418,47.2821,22.37706Q47.4324,22.7399,47.5647,23.1098Q47.697,23.479599999999998,47.811,23.8554Q47.9251,24.231299999999997,48.0205,24.612299999999998Q48.115899999999996,24.993299999999998,48.1926,25.3786Q48.2692,25.7638,48.3268,26.1523Q48.3845,26.5408,48.423,26.9317Q48.4615,27.3226,48.4807,27.7149Q48.5,28.1072,48.5,28.5ZM47.5,28.5Q47.5,28.1318,47.481899999999996,27.764Q47.463899999999995,27.3962,47.427800000000005,27.0297Q47.3917,26.6633,47.337599999999995,26.299Q47.2836,25.9348,47.2118,25.5736Q47.1399,25.2125,47.0505,24.8553Q46.961,24.4981,46.8541,24.145699999999998Q46.7472,23.7934,46.6232,23.4467Q46.4991,23.099899999999998,46.3582,22.759700000000002Q46.2173,22.41955,46.059799999999996,22.086669999999998Q45.9024,21.7538,45.7288,21.42905Q45.5552,21.104300000000002,45.365899999999996,20.78846Q45.1766,20.47262,44.972,20.16645Q44.7675,19.86027,44.548100000000005,19.56451Q44.3288,19.26875,44.0952,18.984099999999998Q43.861599999999996,18.699460000000002,43.6143,18.42662Q43.367000000000004,18.15378,43.1066,17.8934Q42.846199999999996,17.633020000000002,42.5734,17.38573Q42.3005,17.13844,42.0159,16.90484Q41.731300000000005,16.67124,41.435500000000005,16.45189Q41.139700000000005,16.23253,40.8335,16.02796Q40.5274,15.82338,40.2115,15.63407Q39.895700000000005,15.44476,39.5709,15.271180000000001Q39.2462,15.0976,38.9133,14.94016Q38.5804,14.78272,38.2402,14.64181Q37.9,14.50089,37.5533,14.37684Q37.2066,14.252790000000001,36.854299999999995,14.1459Q36.5019,14.039,36.1447,13.94953Q35.7875,13.86006,35.4264,13.788219999999999Q35.065200000000004,13.716380000000001,34.701,13.66235Q34.3367,13.608319999999999,33.9703,13.57223Q33.6038,13.53614,33.236000000000004,13.51807Q32.8682,13.5,32.5,13.5Q32.1318,13.5,31.764,13.51807Q31.3962,13.53614,31.0297,13.57223Q30.6633,13.608319999999999,30.299,13.66235Q29.9348,13.716380000000001,29.5736,13.788219999999999Q29.2125,13.86006,28.8553,13.94953Q28.4981,14.039,28.145699999999998,14.1459Q27.7934,14.252790000000001,27.4467,14.37684Q27.099899999999998,14.50089,26.759700000000002,14.64181Q26.41955,14.78272,26.086669999999998,14.94016Q25.7538,15.0976,25.42905,15.271180000000001Q25.104300000000002,15.44476,24.78846,15.63407Q24.47262,15.82338,24.16645,16.02796Q23.86027,16.23253,23.56451,16.45189Q23.26875,16.67124,22.984099999999998,16.90484Q22.699460000000002,17.13844,22.42662,17.38573Q22.15378,17.633020000000002,21.8934,17.8934Q21.633020000000002,18.15378,21.38573,18.42661Q21.13844,18.699460000000002,20.90484,18.984099999999998Q20.67124,19.26875,20.45189,19.56451Q20.23253,19.86027,20.02796,20.16645Q19.82338,20.47262,19.63407,20.78846Q19.44476,21.104300000000002,19.27118,21.42905Q19.0976,21.7538,18.94016,22.086669999999998Q18.78272,22.41955,18.64181,22.759700000000002Q18.50089,23.099899999999998,18.37684,23.4467Q18.25279,23.7934,18.14589,24.145699999999998Q18.039,24.4981,17.94953,24.8553Q17.86006,25.2125,17.78822,25.5736Q17.71638,25.9348,17.66235,26.299Q17.60832,26.6633,17.57223,27.0297Q17.53614,27.3962,17.51807,27.764Q17.5,28.1318,17.5,28.5Q17.5,28.8682,17.51807,29.236Q17.53614,29.6038,17.57223,29.9703Q17.60832,30.3367,17.66235,30.701Q17.71638,31.0652,17.78822,31.4264Q17.86006,31.7875,17.94953,32.1447Q18.039,32.5019,18.14589,32.854299999999995Q18.25279,33.2066,18.37684,33.5533Q18.50089,33.9,18.64181,34.2402Q18.78272,34.5804,18.94016,34.9133Q19.0976,35.2462,19.27118,35.5709Q19.44476,35.895700000000005,19.63407,36.2115Q19.82338,36.5274,20.02796,36.8335Q20.23253,37.139700000000005,20.45189,37.435500000000005Q20.67124,37.731300000000005,20.90484,38.0159Q21.13844,38.3005,21.38573,38.5734Q21.633020000000002,38.846199999999996,21.8934,39.1066Q22.15378,39.367000000000004,22.42661,39.6143Q22.699460000000002,39.861599999999996,22.984099999999998,40.0952Q23.26875,40.3288,23.56451,40.548100000000005Q23.86027,40.7675,24.16645,40.972Q24.47262,41.1766,24.78846,41.365899999999996Q25.104300000000002,41.5552,25.42905,41.7288Q25.7538,41.9024,26.086669999999998,42.059799999999996Q26.41955,42.2173,26.759700000000002,42.3582Q27.099899999999998,42.4991,27.4467,42.6232Q27.7934,42.7472,28.145699999999998,42.8541Q28.4981,42.961,28.8553,43.0505Q29.2125,43.1399,29.5736,43.2118Q29.9348,43.2836,30.299,43.337599999999995Q30.6633,43.3917,31.0297,43.427800000000005Q31.3962,43.463899999999995,31.764,43.481899999999996Q32.1318,43.5,32.5,43.5Q32.8682,43.5,33.236000000000004,43.481899999999996Q33.6038,43.463899999999995,33.9703,43.427800000000005Q34.3367,43.3917,34.701,43.337599999999995Q35.065200000000004,43.2836,35.4264,43.2118Q35.7875,43.1399,36.1447,43.0505Q36.5019,42.961,36.854299999999995,42.8541Q37.2066,42.7472,37.5533,42.6232Q37.9,42.4991,38.2402,42.3582Q38.5804,42.2173,38.9133,42.059799999999996Q39.2462,41.9024,39.5709,41.7288Q39.895700000000005,41.5552,40.2115,41.365899999999996Q40.5274,41.1766,40.8335,40.972Q41.139700000000005,40.7675,41.435500000000005,40.548100000000005Q41.731300000000005,40.3288,42.0159,40.0952Q42.3005,39.861599999999996,42.5734,39.6143Q42.846199999999996,39.367000000000004,43.1066,39.1066Q43.367000000000004,38.846199999999996,43.6143,38.5734Q43.861599999999996,38.3005,44.0952,38.0159Q44.3288,37.731300000000005,44.548100000000005,37.435500000000005Q44.7675,37.139700000000005,44.972,36.8335Q45.1766,36.5274,45.365899999999996,36.2115Q45.5552,35.895700000000005,45.7288,35.5709Q45.9024,35.2462,46.059799999999996,34.9133Q46.2173,34.5804,46.3582,34.2402Q46.4991,33.9,46.6232,33.5533Q46.7472,33.2066,46.8541,32.854299999999995Q46.961,32.5019,47.0505,32.1447Q47.1399,31.7875,47.2118,31.4264Q47.2836,31.0652,47.337599999999995,30.701Q47.3917,30.3367,47.427800000000005,29.9703Q47.463899999999995,29.6038,47.481899999999996,29.236Q47.5,28.8682,47.5,28.5Z" fill="var(--bd-color4)" /></g><g clipPath="url(#master_svg1_172_002427)"><g><path d="M36.9763283203125,28.856285546875C36.9854283203125,28.838665546875,37.0001783203125,28.823915546875,37.0081483203125,28.805725546875C37.1643483203125,28.480825546875,37.1132083203125,28.083265546875,36.836618320312496,27.821965546875L30.5666983203125,21.891722546875C30.2247683203125,21.568537446875,29.6857793203125,21.583864746875,29.3620133203125,21.925247546875C29.0388283203125,22.267179546875,29.0536061203125,22.806165546875,29.3955383203125,23.129935546875L35.0213783203125,28.451885546875L29.4176743203125,33.852735546874996C29.0791619203125,34.179335546875,29.0689336203125,34.718335546875,29.3955383203125,35.057435546875C29.5625203203125,35.231235546875,29.7857423203125,35.318235546875,30.008965320312498,35.318235546875C30.2219583203125,35.318235546875,30.4349483203125,35.238635546875,30.6002283203125,35.079635546875L36.8133483203125,29.091445546875C36.8252883203125,29.079505546874998,36.8298083203125,29.063045546875,36.8417483203125,29.050555546875C36.8508483203125,29.042045546875002,36.8604983203125,29.035785546875,36.8695583203125,29.026715546875C36.9178283203125,28.976125546875,36.9433883203125,28.914205546875,36.9763283203125,28.856285546875Z" fill="var(--text-color5)"/></g></g></g></svg>
                </div>
                {fileList.map((file,key)=>(
                    <div className="file" key={key} onClick={()=> onClickFunction && onClickFunction(file.fileName)} style={{background: `linear-gradient(to right,var(--bg-color13) ${file.progress}%,var(--bg-color12) ${file.progress}%,var(--bg-color12) 100%)`}}>
                        {closeFunction && <svg className="close" onClick={(e)=> {e.stopPropagation(); closeFunction(key);}} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_172_94574"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_172_94574)"><g><path d="M15.0412609375,7.99946125Q15.0412609375,8.172341249999999,15.0328609375,8.34502125Q15.0243609375,8.51769125,15.0073609375,8.68974125Q14.9904609375,8.86179125,14.9650609375,9.03280125Q14.9397609375,9.20381125,14.9059609375,9.37337125Q14.8722609375,9.54293125,14.8302609375,9.71063125Q14.7882609375,9.87833125,14.7380609375,10.04377125Q14.6879609375,10.20921125,14.6296609375,10.37198125Q14.5714609375,10.53476125,14.5053609375,10.69448125Q14.4391609375,10.85420125,14.3652609375,11.01053125Q14.2913609375,11.16673125,14.2098609375,11.31923125Q14.1283609375,11.47173125,14.0395609375,11.62003125Q13.9506609375,11.76823125,13.8546609375,11.91203125Q13.7585609375,12.05573125,13.6556609375,12.19463125Q13.5526609375,12.33353125,13.4429609375,12.46713125Q13.3333609375,12.60073125,13.2172609375,12.72883125Q13.1011609375,12.85693125,12.9789609375,12.97923125Q12.8567609375,13.10143125,12.7286609375,13.21753125Q12.6005609375,13.33363125,12.4669609375,13.44333125Q12.3333609375,13.55303125,12.1944609375,13.65603125Q12.0556609375,13.75893125,11.9119609375,13.85503125Q11.7681609375,13.95103125,11.6199609375,14.03993125Q11.4716609375,14.12883125,11.3192609375,14.21033125Q11.1667609375,14.29183125,11.0105609375,14.36573125Q10.8542609375,14.43963125,10.6945609375,14.50583125Q10.5348709375,14.57193125,10.3721209375,14.63023125Q10.2093709375,14.68843125,10.0439509375,14.73863125Q9.8785409375,14.78883125,9.7108709375,14.83083125Q9.5431909375,14.87283125,9.3736609375,14.90653125Q9.2041209375,14.94033125,9.0331409375,14.96563125Q8.862150937500001,14.99103125,8.690130937500001,15.00793125Q8.518110937500001,15.02493125,8.3454609375,15.03343125Q8.1728209375,15.04193125,7.9999609375,15.04193125Q7.8271009375,15.04193125,7.6544609375,15.03343125Q7.4818109375,15.02493125,7.3097909375,15.00793125Q7.1377609375,14.99103125,6.9667809375,14.96563125Q6.7958009375,14.94033125,6.6262609375,14.90653125Q6.4567309375,14.87283125,6.2890509375,14.83083125Q6.1213809375,14.78883125,5.9559709375,14.73863125Q5.7905509375,14.68843125,5.6278009375,14.63023125Q5.4650509375,14.57193125,5.3053509375,14.50583125Q5.1456609375,14.43963125,4.9894009375,14.36573125Q4.8331409375,14.29183125,4.6806909375,14.21033125Q4.5282509375,14.12883125,4.379990937500001,14.03993125Q4.2317209375000004,13.95103125,4.0880009375,13.85503125Q3.9442809375,13.75893125,3.8054409375,13.65603125Q3.6666009375,13.55303125,3.5329809375,13.44333125Q3.3993609375,13.33363125,3.2712809375,13.21753125Q3.1432109375,13.10143125,3.0209809375,12.97923125Q2.8987509375,12.85693125,2.7826709375,12.72883125Q2.6665909375,12.60073125,2.5569309375,12.46713125Q2.4472709375,12.33353125,2.3443009375,12.19463125Q2.2413309375,12.05573125,2.1453009375,11.91203125Q2.0492609374999997,11.76823125,1.9604009375,11.62003125Q1.8715349374999999,11.47173125,1.7900509375,11.31923125Q1.7085679375,11.16673125,1.6346629375,11.01053125Q1.5607579375,10.85420125,1.4946089375,10.69448125Q1.4284599375,10.53476125,1.3702269375,10.37198125Q1.3119939375,10.20921125,1.2618169375,10.04377125Q1.2116389375,9.87833125,1.1696389375,9.71063125Q1.1276379375,9.54293125,1.0939159375,9.37337125Q1.0601939375,9.20381125,1.0348305375,9.03280125Q1.0094674375,8.86179125,0.9925246375,8.68974125Q0.9755818375,8.51769125,0.9671002475,8.34502125Q0.9586186375,8.172341249999999,0.9586186375,7.99946125Q0.9586186375,7.82658125,0.9671002475,7.65390125Q0.9755818375,7.48123125,0.9925246375,7.30918125Q1.0094674375,7.13713125,1.0348305375,6.96612125Q1.0601939375,6.79511125,1.0939159375,6.62555125Q1.1276379375,6.45599125,1.1696389375,6.28829125Q1.2116389375,6.12059125,1.2618169375,5.95515125Q1.3119939375,5.78971125,1.3702269375,5.62694125Q1.4284599375,5.46416125,1.4946089375,5.30444125Q1.5607579375,5.14472125,1.6346629375,4.98843125Q1.7085679375,4.83215125,1.7900509375,4.67968125Q1.8715349374999999,4.527211250000001,1.9604009375,4.37893125Q2.0492609374999997,4.23064125,2.1453009375,4.08689125Q2.2413309375,3.94315125,2.3443009375,3.80429125Q2.4472709375,3.66543125,2.5569309375,3.53179125Q2.6665909375,3.39815125,2.7826709375,3.27005125Q2.8987509375,3.14196125,3.0209809375,3.01971125Q3.1432109375,2.89746125,3.2712809375,2.78136125Q3.3993609375,2.66526125,3.5329809375,2.55559125Q3.6666009375,2.44591125,3.8054409375,2.34293125Q3.9442809375,2.23994125,4.0880009375,2.1438912500000002Q4.2317209375000004,2.04785125,4.379990937500001,1.95897125Q4.5282509375,1.87008825,4.6806909375,1.78859225Q4.8331409375,1.70709625,4.9894009375,1.6331802500000001Q5.1456609375,1.5592632499999999,5.3053509375,1.49310425Q5.4650509375,1.42694525,5.6278009375,1.36870325Q5.7905509375,1.31046125,5.9559709375,1.26027625Q6.1213809375,1.21009125,6.2890509375,1.16808425Q6.4567309375,1.12607725,6.6262609375,1.09234925Q6.7958009375,1.05862225,6.9667809375,1.03325495Q7.1377609375,1.00788785,7.3097909375,0.99094245Q7.4818109375,0.97399705,7.6544609375,0.96551416Q7.8271009375,0.95703125,7.9999609375,0.95703125Q8.1728209375,0.95703125,8.3454609375,0.96551416Q8.518110937500001,0.97399705,8.690130937500001,0.99094245Q8.862150937500001,1.00788785,9.0331409375,1.03325485Q9.2041209375,1.05862225,9.3736609375,1.09234925Q9.5431909375,1.12607725,9.7108709375,1.16808425Q9.8785409375,1.21009125,10.0439509375,1.26027625Q10.2093709375,1.31046125,10.3721209375,1.36870325Q10.5348709375,1.42694525,10.6945609375,1.49310425Q10.8542609375,1.5592632499999999,11.0105609375,1.6331802500000001Q11.1667609375,1.70709625,11.3192609375,1.78859225Q11.4716609375,1.87008825,11.6199609375,1.95897125Q11.7681609375,2.04785125,11.9119609375,2.1438912500000002Q12.0556609375,2.23994125,12.1944609375,2.34293125Q12.3333609375,2.44591125,12.4669609375,2.55559125Q12.6005609375,2.66526125,12.7286609375,2.78136125Q12.8567609375,2.89746125,12.9789609375,3.01971125Q13.1011609375,3.14196125,13.2172609375,3.27005125Q13.3333609375,3.39815125,13.4429609375,3.53179125Q13.5526609375,3.66543125,13.6556609375,3.80429125Q13.7585609375,3.94315125,13.8546609375,4.08689125Q13.9506609375,4.23064125,14.0395609375,4.37893125Q14.1283609375,4.527211250000001,14.2098609375,4.67968125Q14.2913609375,4.83215125,14.3652609375,4.98843125Q14.4391609375,5.14472125,14.5053609375,5.30444125Q14.5714609375,5.46416125,14.6296609375,5.62694125Q14.6879609375,5.78971125,14.7380609375,5.95515125Q14.7882609375,6.12059125,14.8302609375,6.28829125Q14.8722609375,6.45599125,14.9059609375,6.62555125Q14.9397609375,6.79511125,14.9650609375,6.96612125Q14.9904609375,7.13713125,15.0073609375,7.30918125Q15.0243609375,7.48123125,15.0328609375,7.65390125Q15.0412609375,7.82658125,15.0412609375,7.99946125Z" fill="var(--bg-color15)"/></g><g><path d="M11.21149875,4.77725575L11.22205875,4.78781575C11.40943875,4.97525575,11.40943875,5.27909575,11.22205875,5.46653575L8.68925875,7.99965875L11.22205875,10.53277875C11.40943875,10.72021875,11.40943875,11.02405875,11.22205875,11.21149875L11.21149875,11.22205875C11.02405875,11.40943875,10.72021875,11.40943875,10.53277875,11.22205875L7.99965875,8.68925875L5.4665367499999995,11.22205875C5.27909675,11.40943875,4.97525675,11.40943875,4.78781675,11.22205875L4.77725675,11.21149875C4.58987285,11.02405875,4.58987285,10.72021875,4.77725675,10.53277875L7.31005875,7.99965875L4.77725675,5.46653575C4.58987375,5.27909575,4.58987375,4.97525575,4.77725675,4.78781575L4.78781675,4.77725575C4.97525675,4.58987285,5.27909675,4.58987285,5.4665367499999995,4.77725575L7.99965875,7.31005875L10.53277875,4.77725675C10.72021875,4.58987335,11.02405875,4.58987335,11.21149875,4.77725575Z" fill="#FFFFFF"/></g></g></svg>}
                        <span className="img" dangerouslySetInnerHTML={{ __html: getFileTypePng(file.suffixName) }}/>
                        <div className="fileData">
                            <span className="label" title={file.fileName}>{file.fileName}</span>
                            {file.progress === 0 ?
                                <div className="info">
                                    <span>{file.suffixName}</span>
                                    <span>{formatFileSize(file.fileSize)}</span>
                                    <span>{file.wordNumber && file.wordNumber + '字'}</span>
                                </div> :
                                <div className="info">
                                    <span>上传中...{file.progress}%</span>
                                    <span>{formatFileSize(file.fileSize)}</span>
                                </div>
                            }
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default FileList;
